<template>
  <div>
    <div class="flexd">
      <div class="button">
        <div v-show="show" class="but_con" @click="isshow">
          <img src="../../assets/iconfont/咨询.png" alt="" />
          <p>咨询</p>
          <!--{ch}咨询-->
          <!--{en}seek advice from-->
        </div>
        <div v-show="!show" class="but_con" @click="notshow">
          <img src="../../assets/iconfont/收起.png" alt="" />
          <p>收起</p>
          <!--{cn}收起-->
          <!--{en}retract-->
        </div>
      </div>
    </div>
    <div class="body_small">
      <div class="small" v-show="showsmall">
        <div class="pop"></div>
        <div v-show="loading.show" class="container">
          <div class="small_head">
            <div class="small_left">
              <img
                src="../../assets/iconfont/咨询.png"
                class="small_img"
                alt=""
              />
              <div class="small_name">航式集团</div>
              <div class="small_q">
                问题咨询
                <!--{cn}问题咨询-->
                <!--{en}Consultation-->
              </div>
            </div>
            <div class="small_right">
              <div class="small_heads">
                <div class="small_icon" @click="Language">
                  <img
                    class="small_action_img"
                    style="width: 20px; height: 20px; cursor: pointer"
                    src="../../assets/iconfont/英文.png"
                    alt=""
                  />
                  <span class="small_action"> </span>
                </div>
                <div class="small_icon" @click="close">
                  <img
                    class="small_action_img"
                    style="width: 20px; height: 20px; cursor: pointer"
                    src="../../assets/iconfont/关闭.png"
                    alt=""
                  />
                  <span class="small_action"> </span>
                </div>
              </div>
            </div>
          </div>
          <div class="small_body">
            <div class="small_seek">
              问题咨询
              <!--{cn}问题咨询-->
              <!--{en}Problem Consultation-->
            </div>
            <div class="small_answer">
              可以快速解答你的任何问题
              <!--{cn}可以快速解答你的任何问题-->
              <!--{en}Addressing industry pain points-->
            </div>
            <div class="small_ask">
              <div class="small_radius" @click="asking">
                <span
                  >开始提问
                  <!--{cn}开始提问-->
                  <!--{en}Start Asking-->
                </span>
              </div>
            </div>
          </div>
        </div>
        <div v-show="!loading.show" class="container">
          <div class="small_head">
            <div class="small_left">
              <img
                src="../../assets/iconfont/返回.png"
                class="small_img"
                alt=""
              />
              <div class="small_name">山风集团</div>
              <div class="small_q">
                航云智能
                <!--{cn}航云智能-->
                <!--{en}Aviation Cloud Intelligence-->
              </div>
            </div>
            <div class="small_right">
              <div class="small_heads">
                <div class="small_icon" @click="Language">
                  <img
                    class="small_action_img"
                    style="width: 20px; height: 20px; cursor: pointer"
                    src="../../assets/iconfont/英文.png"
                    alt=""
                  />
                  <span class="small_action"> </span>
                </div>
                <div class="small_icon" @click="amplify(true)">
                  <img
                    class="small_action_img"
                    style="width: 20px; height: 20px; cursor: pointer"
                    src="../../assets/iconfont/放大.png"
                    alt=""
                  />
                  <span class="small_action"> </span>
                </div>
              </div>
            </div>
          </div>
          <div class="sc-jfTVlA cXrjBB">
            <div class="sc-khsqcC gRUMJN">
              <div class="sc-jOiSOi yDZAk">
                <div class="sc-lnRjOm kpmhEw">
                  <div class="sc-fmuwQx hkwhyP">
                    <div class="sc-fHSyak dkNAKu">
                      <div class="ant-carousel ant-carousel-vertical">
                        <div
                          class="slick-slider slick-vertical slick-initialized"
                        >
                          <div class="slick-list">
                            <div
                              class="slick-track"
                              style="
                                opacity: 1;
                                transform: translate3d(0px, 0px, 0px);
                                transition: -webkit-transform 500ms ease 0s;
                              "
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="sc-cvfwTA fiDhJz">
                      <div class="sc-iJbNxu xCNgX">
                        <!-- 机器人回复 -->
                        <div class="sc-fkinUv kbAhTR">
                          <div class="sc-cTcUcm hoZsAe">
                            {{
                              new Date().getHours() +
                              ":" +
                              new Date().getMinutes()
                            }}
                          </div>
                          <div>
                            <div class="sc-hWdGLs OVebC">
                              <div class="sc-lhlUkk kJMbaC">
                                <img
                                  src="../../assets/iconfont/2 在线客服 橙.png"
                                  class="sc-bcXHqe fbBrHL"
                                  style="
                                    height: 32px;
                                    width: 32px;
                                    border-radius: 50%;
                                  "
                                />
                              </div>
                              <div class="sc-hmTbGb eFHjVk">
                                <div class="sc-gpoSCe dNNezB">
                                  <div class="sc-fWHiwC kQdsap">
                                    蜘蛛链智能客服
                                  </div>
                                </div>
                                <div class="sc-grBbyg lhZrNC">
                                  <div class="sc-djTcra liuBUD">
                                    <div class="sc-ewvfhA ehhtFL">
                                      <div class="sc-WKhSL bPPVYW">
                                        <div class="sc-ikHGee dGthdi">
                                          <span></span>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="sc-ehVsHJ hyYRtw">
                                      <div class="sc-hZDVde fIHtpf">
                                        <div><b>热门推荐：</b></div>
                                        <div>
                                          <a>蜘蛛链产品&amp;解决方案咨询</a>
                                        </div>
                                        <div><a>蜘蛛链版权保护及交易</a></div>
                                        <div><a>关于蜘蛛链</a></div>
                                        <div><a>蜘蛛链合作伙伴</a></div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="sc-leZLoi fKzKx"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- 用户发送 -->
                        <div></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sc-cUEOzv itDyay"></div>
              </div>
              <!-- 聊天框 -->
              <div class="sc-AHaJN mZSrw launcher-footer">
                <div
                  data-aspm="c116632"
                  data-aspm-expo="true"
                  class="sc-sQEHl jZCvVk"
                >
                  <div class="sc-byhhpF dJHGJf"></div>
                  <div class="sc-jcTjWU hfppJW">
                    <div class="sc-fkMAoN gMIRnF">
                      <div class="sc-dmjyfX ieQeqc"></div>
                    </div>
                  </div>
                  <div class="sc-gtocSg eBvFCr">
                    <div>
                      <a class="sc-gcKXsy dcJJfS"
                        ><i>
                          <svg
                            t="1683288391601"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="6748"
                            width="200"
                            height="200"
                          >
                            <path
                              d="M884.2 909.6H126.8c-38.6 0-70-31.4-70-70V204.6c0-38.6 31.4-70 70-70h328.6c38.6 0 70 31.4 70 70 0 11-9 20-20 20s-20-9-20-20c0-16.6-13.4-30-30-30H126.8c-16.6 0-30 13.4-30 30v635c0 16.6 13.4 30 30 30h757.4c11 0 20 9 20 20s-8.8 20-20 20z"
                              fill="#262435"
                              p-id="6749"
                            ></path>
                            <path
                              d="M884.2 909.6c-11 0-20-9-20-20s9-20 20-20c16.6 0 30-13.4 30-30V428.2c0-16.6-13.4-30-30-30H292.6c-16.6 0-30 13.4-30 30v268.6c0 11-9 20-20 20s-20-9-20-20V428.2c0-38.6 31.4-70 70-70h591.6c38.6 0 70 31.4 70 70v411.4c0 38.6-31.4 70-70 70zM734 295h-178.2c-38.6 0-70-31.4-70-70v-10.4c0-11 9-20 20-20s20 9 20 20v10.4c0 16.6 13.4 30 30 30H734c11 0 20 9 20 20s-9 20-20 20z"
                              fill="#262435"
                              p-id="6750"
                            ></path>
                            <path
                              d="M192.8 909.6h-15.8c-11 0-20-9-20-20s9-20 20-20h15.8c16.6 0 30-13.4 30-30v-168.6c0-11 9-20 20-20s20 9 20 20v168.6c-0.2 38.6-31.4 70-70 70zM818 398.4c-11 0-20-9-20-20v-53.2c0-16.6-13.4-30-30-30h-90.4c-11 0-20-9-20-20s9-20 20-20H768c38.6 0 70 31.4 70 70v53.2c0 11-9 20-20 20z"
                              fill="#262435"
                              p-id="6751"
                            ></path>
                            <path
                              d="M598.2 764.6c-11 0-20-9-20-20V532.4c0-11 9-20 20-20s20 9 20 20v212.2c0 11-9 20-20 20z"
                              fill="#262435"
                              p-id="6752"
                            ></path>
                            <path
                              d="M683.8 638c-5.2 0-10.2-2-14.2-5.8L584 546.6c-7.8-7.8-7.8-20.4 0-28.2 7.8-7.8 20.4-7.8 28.2 0L698 604c7.8 7.8 7.8 20.4 0 28.2-4 4-9 5.8-14.2 5.8z"
                              fill="#262435"
                              p-id="6753"
                            ></path>
                            <path
                              d="M512.4 638c-5.2 0-10.2-2-14.2-5.8-7.8-7.8-7.8-20.4 0-28.2l85.8-85.8c7.8-7.8 20.4-7.8 28.2 0 7.8 7.8 7.8 20.4 0 28.2l-85.8 85.8c-3.8 4-8.8 5.8-14 5.8z"
                              fill="#262435"
                              p-id="6754"
                            ></path>
                          </svg> </i></a
                      ><a class="sc-gcKXsy dcJJfS"
                        ><i
                          ><svg
                            t="1683288488432"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="6932"
                            width="200"
                            height="200"
                          >
                            <path
                              d="M247.8 421.2h14.6c13.7 0 24.8-11.1 24.8-24.8v-78.6c0-7.4-3.3-14.1-8.5-18.7 10.1-42.7 31.9-81.9 63.7-113.7 45.3-45.3 105.5-70.2 169.6-70.2s124.3 24.9 169.6 70.2c31.7 31.7 53.3 70.6 63.6 113-5.7 4.5-9.3 11.5-9.3 19.3v78.6c0 13.7 11.1 24.8 24.8 24.8h14.6c13.7 0 24.8-11.1 24.8-24.8v-78.6c0-12.5-9.2-22.8-21.2-24.5-11.4-49.6-36.4-95.1-73.2-131.9-51.7-51.7-120.5-80.1-193.6-80.1s-141.9 28.5-193.6 80.2c-36.8 36.8-61.8 82.3-73.2 131.8-12.5 1.3-22.2 11.8-22.2 24.7v78.6c-0.1 13.6 11.1 24.7 24.7 24.7z"
                              fill=""
                              p-id="6933"
                            ></path>
                            <path
                              d="M597.9 553.1C673.3 520 726.1 444.5 726.1 357c0-118-96-214-214-214s-214 96-214 214c0 87.8 53.1 163.4 128.9 196.4-170.7 39.1-298 191.8-298 374.3h768.1c0-182.9-127.9-336-299.2-374.6zM332 357c0-99.3 80.8-180 180-180 99.3 0 180 80.8 180 180s-80.8 180-180 180-180-80.7-180-180z"
                              fill=""
                              p-id="6934"
                            ></path></svg></i></a
                      ><a class="sc-gcKXsy dcJJfS"
                        ><i
                          ><svg
                            t="1683288561301"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="8450"
                            width="200"
                            height="200"
                          >
                            <path
                              d="M737.38752 957.44c-13.35808 0-25.728-3.46112-37.61152-9.89696l-181.09952-99.48672a13.86496 13.86496 0 0 0-13.85472 0l-181.10464 99.48672c-11.87328 6.43584-24.74496 9.89696-37.6064 9.89696-23.25504 0-45.0304-10.3936-60.36992-28.70272-15.83616-18.31424-22.26176-43.06432-18.30912-67.80928l34.64192-210.8416c0.98816-5.93408-0.99328-12.37504-4.95104-16.82432l-146.95936-148.48c-21.76512-22.272-29.18912-54.9376-19.29216-85.13024 9.89184-29.20448 34.13504-49.99168 63.82592-54.9376l202.38336-30.68416c4.9408-0.98816 9.40032-4.4544 11.87328-9.40544l91.04384-191.5392C453.36576 84.3776 481.07008 66.56 512.25088 66.56c31.17056 0 58.38336 17.8176 72.23808 46.52544l90.55232 191.5392c2.47296 4.95104 6.93248 8.41728 11.8784 9.40544l202.37312 30.68416c29.68576 4.4544 54.4256 25.73312 63.83104 54.9376 9.90208 30.18752 2.47296 62.85824-19.29728 85.13024l-146.4576 149.46304c-3.95776 3.95776-5.94432 10.39872-4.95616 16.83456l34.64192 210.83648c3.95264 24.25344-2.47296 49.00352-18.30912 67.80416-15.83616 17.32608-38.10304 27.71968-61.35808 27.71968z m-225.6384-175.20128c13.35808 0 26.22464 3.46624 37.61152 9.89696l181.09952 99.4816c2.46784 1.47968 4.4544 1.98144 6.93248 1.98144 3.95776 0 8.40704-1.98144 11.38176-5.9392 2.47296-2.9696 5.44256-7.91552 3.95264-15.34464l-34.6368-210.8416c-4.45952-26.22976 3.95776-53.4528 22.7584-72.25856L887.808 439.74144c7.424-7.424 4.95616-16.82944 4.4544-19.79904-0.98304-2.9696-4.4544-10.3936-12.87168-11.38176l-202.37312-30.68928a79.42144 79.42144 0 0 1-60.36992-45.53728l-90.55232-192.03072c-3.95776-8.41728-10.38848-9.40544-13.8496-9.40544-3.46624 0-9.89696 1.4848-13.85984 9.40544L407.3472 331.84256a79.42656 79.42656 0 0 1-60.36992 45.53216L144.59904 408.064c-8.41216 1.4848-11.87328 8.41216-12.86144 11.38176-0.98816 2.47296-3.46624 12.37504 4.4544 19.79904l146.46272 149.46304c18.30912 18.816 26.7264 45.53728 22.76352 72.26368l-34.6368 210.8416a18.60096 18.60096 0 0 0 3.96288 15.84128c2.9696 3.46624 7.41888 5.9392 11.38176 5.9392 2.47296 0 4.44928-0.50176 6.92736-1.98144l181.10976-99.4816a77.58848 77.58848 0 0 1 37.58592-9.89184z"
                              fill="#333333"
                              p-id="8451"
                            ></path></svg></i
                      ></a>
                    </div>
                    <div class="sc-fOlkSH THmXS">
                      <span><div>结束会话</div></span>
                    </div>
                  </div>
                  <div
                    data-aspm="c116633"
                    data-aspm-expo="true"
                    class="sc-bQmOxr bDfYFu"
                  >
                    <div class="sc-jGNhvO faFRTb">
                      <textarea
                        @keyup.enter="enterSeek"
                        rows="1"
                        placeholder="请简要的描述下你遇到的问题"
                        class="sc-xWrgk ijTTiD"
                        style="height: 114px"
                        v-model.trim="seek"
                      ></textarea>
                      <div class="sc-fWQKxP ccRMVg">
                        <p>Enter 发送 / Shift+Enter 换行</p>
                        <button
                          @click="enterSeek"
                          type="button"
                          class="ant-btn ant-btn-primary ant-btn-sm seek_but"
                        >
                          发送
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


    
<script setup>
import { onMounted, ref } from "vue";
import kefu from "../../assets/iconfont/2 在线客服 橙.png";
import "../../../public/js/translate.js";
import { ElLoading } from "element-plus";
let show = ref(true);
let showsmall = ref(false);
let lan = ref(true);
let loading = ref({
  show: true,
});
let seek = ref("");

const enterSeek = () => {
  let obj = `<div class="sc-hWdGLs fxiGpr">
                <div class="sc-hmTbGb hyhSDL">
                  <div class="sc-gpoSCe lnGHOK"></div>
                    <div class="sc-grBbyg cvaOhP">
                      <div class="sc-djTcra gKAPDh">
                        <div class="sc-ewvfhA cCIzgM">
                          <div class="sc-WKhSL bPPVYW">
                            <span>${seek.value.trim()}</span>
                          </div>
                        </div>
                      </div>
                    <div class="sc-leZLoi fKzKx"></div>
                  </div>
                <div class="sc-iXGltN cJdeIG">
                <span>全部已读</span>
              </div>
            </div>
          </div>`;
  let sc = document.querySelector(".sc-iJbNxu");
  let div = document.createElement("div");
  div.innerHTML = obj;
  let webobj = `<div class="sc-fkinUv kbAhTR">
                          <div class="sc-cTcUcm hoZsAe">${
                            new Date().getHours() +
                            ":" +
                            new Date().getMinutes()
                          }</div>
                          <div>
                            <div class="sc-hWdGLs OVebC">
                              <div class="sc-lhlUkk kJMbaC">
                                <img
                                  src="${kefu}"
                                  class="sc-bcXHqe fbBrHL"
                                  style="
                                    height: 32px;
                                    width: 32px;
                                    border-radius: 50%;
                                  "
                                />
                              </div>
                              <div class="sc-hmTbGb eFHjVk">
                                <div class="sc-gpoSCe dNNezB">
                                  <div class="sc-fWHiwC kQdsap">
                                    蜘蛛链智能客服
                                  </div>
                                </div>
                                <div class="sc-grBbyg lhZrNC">
                                  <div class="sc-djTcra liuBUD">
                                    <div class="sc-ewvfhA ehhtFL">
                                      <div class="sc-WKhSL bPPVYW">
                                      </div>
                                    </div>
<div><a>${
    seek.value == "上链"
      ? "指将数据（文本，文件等）以交易的形式写到区块链上，使之不可篡改的过程。"
      : seek.value == "存证"
      ? "由用户自主上传需要固证的文件或数据，区块链将用户自主上传需要固证的文件或数据通过「区块链」进行固证。"
      : "没有找到相关问题"
  }</a></div>
                                  </div>
                                  <div class="sc-leZLoi fKzKx"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>`;
  let divs = document.createElement("div");
  divs.innerHTML = webobj;

  sc.appendChild(div);
  seek.value = "";
  setTimeout(() => {
    sc.appendChild(divs);
  }, 2000);
};

const fullscreenLoading = ref(false);

const Language = () => {
  if (lan.value == true) {
    var tran = new Translater({
      lang: "cn",
    });
  } else {
    var tran = new Translater({
      lang: "en",
    });
  }
  lan.value = !lan.value;
};

const amplify = () => {
  if (true) {
    let smalls = document.querySelector(".small");
    smalls.style.width = "700px";
  }
};

const asking = () => {
  //   v-loading="fullscreenLoading"
  loading.value.show = false;
  setTimeout(() => {
    fullscreenLoading.value = true;
  }, 3000);
};

const isshow = () => {
  show.value = false;
  showsmall.value = true;
  loading.value.show = true;
};
const notshow = () => {
  show.value = true;
  showsmall.value = false;
  loading.value.show = false;
  fullscreenLoading.value = true;
};
const close = () => {
  show.value = true;
  showsmall.value = false;
  loading.value.show = false;
  fullscreenLoading.value = true;
};
</script>
    
<style lang='less'>
.example-showcase .el-loading-mask {
  z-index: 9;
}
.flexd {
  position: fixed;
  right: 0;
  bottom: calc(50% + 8px);
  z-index: 20;
  width: 48px;
  text-align: center;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 12px -1px rgb(29 57 196 / 15%);
  box-shadow: 0 4px 12px -1px rgb(29 57 196 / 15%);
  .button {
    width: 48px;
    height: 48px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    background-color: #2f54eb;
    border-radius: 4px;
    cursor: pointer;
    .but_con {
      padding-bottom: 2px;
      p {
        font-weight: 600;
      }
      img {
        // display: block;
        height: 25px;
        // margin: 0 auto;
        font-weight: 500;
        font-size: 22px;
        margin-top: 2px;
      }
    }
  }
}
.body_small {
  position: fixed;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 1107;
}
.small {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  max-height: 90vh;
  height: 720px;
  width: 376px;
  background: rgb(255, 255, 255);
  box-shadow: rgb(44 44 44 / 10%) 2px 2px 20px 0px;
  border-radius: 8px;
  overflow: hidden;
  display: block;

  .pop {
    height: 0px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden auto;
    .small_head {
      user-select: none;
      cursor: auto;
      z-index: 1;
      height: 50px;
      // background-color: rgb(47, 84, 235);
      background-color: #0077fa;
      padding: 16px;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      .small_left {
        flex: 1 1 0%;
        overflow: hidden;
        display: flex;
        -webkit-box-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        align-items: center;
        padding-right: 8px;
      }
      .small_img {
        margin-right: 4px;
        user-select: none;
        height: 26px;
        width: 26px;
        flex: 0 0 auto;
        border-radius: 50%;
      }
      .small_name {
        color: rgb(255, 255, 255);
        font-size: 14px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding-right: 12px;
        text-align: center;
        line-height: 14px;
        margin-right: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .small_q {
        flex: 1 1 0%;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.68);
      }
    }
    .small_right {
      flex: 0 0 auto;
      .small_heads {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        .small_icon {
          height: 32px;
          width: 32px;
          border-radius: 8px;
          display: inline-flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          cursor: pointer;
          .small_icon:hover {
            background: rgba(153, 153, 153, 1);
          }
        }
      }
    }
    .small_body {
      // background-color: rgb(47, 84, 235);
      background-color: #0077fa;
      display: flex;
      text-align: center;
      flex-direction: column;
      -webkit-box-pack: center;
      justify-content: center;
      flex: 3 1 0%;
      -webkit-box-align: center;
      align-items: center;
      min-height: 200px;
      padding-bottom: 68px;
      .small_seek {
        font-size: 24px;
        color: white;
      }
      .small_answer {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 32px;
      }
      .small_ask {
        position: relative;
        height: 40px;
        -webkit-box-align: center;
        align-items: center;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        width: 300px;
      }
      .small_radius {
        background-color: white;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        width: 150px;
        color: rgb(47, 84, 235);
        cursor: pointer;
        transition: opacity 0.15s ease 0s;
        animation-fill-mode: both;
        span {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          color: #00aaffd9;
          font-size: 14px;
          font-variant: tabular-nums;
          line-height: 1.5715;
          list-style: none;
          font-feature-settings: "tnum";
          position: relative;
          display: inline-block;
          line-height: 1;
        }
      }
    }
  }
}

.sc-jfTVlA {
  flex: 1 1 auto;
}
.cXrjBB {
  position: relative;
}
.gRUMJN {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .sc-jOiSOi {
    flex: 1 1 auto;
  }
}
.yDZAk {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  position: relative;
  box-sizing: content-box;
}
.kpmhEw {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.hkwhyP {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dkNAKu {
  position: sticky;
  top: 0px;
  z-index: 99;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
.fiDhJz {
  height: 100%;
  width: 100%;
  overflow: hidden scroll;
  overscroll-behavior: contain;
}
.kbAhTR {
  padding: 20px 16px 12px;
}
.hoZsAe {
  text-align: center;
  font-size: 12px;
  margin-bottom: 8px;
}
.OVebC {
  display: flex;
  margin-bottom: 12px;
  position: relative;
  flex-direction: row;
}
.kJMbaC {
  margin-right: 12px;
}

.xCNgX img {
  cursor: pointer;
}
.eFHjVk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
}
.dNNezB {
  font-size: 12px;
  height: 1.5em;
  margin-bottom: 2px;
  text-align: left;
}
.kQdsap {
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s ease 0s;
}
.lhZrNC {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.liuBUD {
  width: fit-content;
  flex: 0 0 auto;
  max-width: min(600px, 100% - 40px);
  background-color: rgb(248, 249, 251);
  border-radius: 0px 8px 8px;
  padding: 10px 14px;
  margin-bottom: 0px;
  font-size: 14px;
  line-height: 22px;
  color: rgb(13, 26, 38);
  word-break: break-word;
}
.bPPVYW {
  cursor: text;
}
.dGthdi {
  white-space: pre-wrap;
}
.liuBUD .sc-ewvfhA + .sc-ehVsHJ {
  margin-top: 16px;
}
b,
strong {
  font-weight: bolder;
}

a {
  color: rgb(61, 93, 221);
}

a {
  background: transparent;
  text-decoration: none;
  outline: none;
}
.fKzKx {
  margin: 0px 8px;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.ioCvIu .launcher-footer {
  border-top: 0px !important;
}
.gRUMJN > .sc-AHaJN {
  flex: 0 0 auto;
}
.jZCvVk {
  max-height: 500px;
  min-height: 180px;
  box-sizing: content-box;
}
.dJHGJf {
  width: 100%;
  display: flex;
  overflow-x: auto;
  padding: 0px 8px;
  -webkit-box-align: center;
  align-items: center;
}
.hfppJW {
  width: 100%;
  height: 1px;
  position: relative;
  overflow: visible;
}
.gMIRnF {
  width: 100%;
  position: absolute;
  left: 0px;
  top: -2px;
  padding: 2px 0px;
  background: transparent;
  cursor: row-resize;
}
.ieQeqc {
  height: 1px;
  background: rgb(233, 233, 233);
}
.eBvFCr {
  padding: 6px 12px 4px;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.dcJJfS,
.dcJJfS i.iconfont {
  font-size: 20px;
}
.dcJJfS {
  display: inline-block;
  margin-right: 4px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: rgb(51, 51, 51);
  transition: all 0.4s ease 0s;
}
.THmXS {
  font-family: PingFangSC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 10, 26, 0.68);
  line-height: 29px;
  cursor: pointer;
}
.bDfYFu {
  background: rgb(255, 255, 255);
  position: relative;
  width: 100%;
}
.faFRTb {
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  flex-direction: column;
}
.faFRTb > .sc-xWrgk {
  flex: 1 1 auto;
}
.ijTTiD {
  height: 100%;
  padding: 12px 24px;
  resize: none;
  color: rgb(61, 67, 92);
  font-size: 14px;
  line-height: 20px;
  background: transparent;
}
input,
textarea {
  outline: none;
  border: none;
}

textarea {
  overflow: auto;
}
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
.faFRTb > div {
  flex: 0 0 auto;
}

.ccRMVg {
  padding: 10px;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  align-items: center;
}
.ccRMVg > p {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.25);
  margin-right: 10px;
}
.ccRMVg .ant-btn-primary[disabled] {
  color: rgba(0, 0, 0, 0.25);
  background: rgb(245, 245, 245);
  border: 1px solid rgb(217, 217, 217);
  text-shadow: none;
  box-shadow: none;
}
.ant-btn[disabled] > * {
  pointer-events: none;
}

.ant-btn > span {
  display: inline-block;
}
.fxiGpr {
  display: flex;
  margin-bottom: 12px;
  position: relative;
  flex-direction: row-reverse;
}

.hyhSDL {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 1 auto;
}
.lnGHOK {
  font-size: 12px;
  height: 1.5em;
  margin-bottom: 2px;
  text-align: right;
}
.cvaOhP {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}
.gKAPDh {
  width: fit-content;
  flex: 0 0 auto;
  max-width: min(600px, 100% - 40px);
  background-color: rgb(214, 222, 255);
  border-radius: 8px 0px 8px 8px;
  padding: 10px 14px;
  margin-bottom: 0px;
  font-size: 14px;
  line-height: 22px;
  color: rgb(13, 26, 38);
  word-break: break-word;
}
.bPPVYW {
  cursor: text;
}
.dGthdi {
  white-space: pre-wrap;
}
.fKzKx {
  margin: 0px 8px;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.cJdeIG {
  margin-top: 2px;
  font-size: 12px;
  line-height: 14px;
  width: 100%;
  text-align: right;
  user-select: none;
}
.cJdeIG span {
  color: rgb(203, 203, 203);
}
*,
*:before,
*:after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
i svg {
  width: 20px;
  height: 20px;
}
.seek_but {
  color: black !important;
  display: inline-block;
  background: none;
  border: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 8px;
  width: 60px;
  height: 30px;
  font-size: 14px;
  font-weight: normal;
  font-family: inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f5f5f5;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  box-shadow: inset 0 0 0 4px #f5f5f5, 0 0 1px 1px rgba(0, 0, 0, 0.25);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  cursor: pointer !important;
}
.seek_but:before,
.seek_but:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  pointer-events: none;
  box-sizing: border-box;
}
.seek_but:before {
  border-color: #0077fa transparent;
  -webkit-transform: skewX(-81deg);
  transform: skewX(-81deg);
}
.seek_but:after {
  border-color: transparent #0077fa;
  -webkit-transform: skewY(40deg);
  transform: skewY(40deg);
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}
.seek_but:hover {
  color: #0077fa;
}
.seek_but:hover:before,
.seek_but:hover:after {
  -webkit-transform: none;
  transform: none;
}
</style>